<template>
	<view class="login">


		<view class="login-text">
			<view class="large-text">{{largeLoginText}}</view>
			<view class="little-text" @click="changeLoginType">{{littleLoginText}}</view>
		</view>

		<view class="" v-if="loginType === 0">
			<view class="input-box cg-align-center">
				<view class="area">
					+86
				</view>
				<input class="cg-flex1" type="number" placeholder="请输入手机号码" v-model="phone">
			</view>
		</view>
		<view class="" v-if="loginType === 1">
			<view class="input-box cg-align-center">
				<view class="area">

				</view>
				<input class="cg-flex1" type="number" placeholder="请输入手机号码" v-model="phone">
			</view>
			<view class="input-box cg-align-center">
				<view class="area">

				</view>
				<input class="cg-flex1" type="password" placeholder="请输入密码" v-model="password">
			</view>
		</view>


		<view class="btn-login">
			<u-button :text="btnText" @click="submit" :disabled="phone.length !== 11"></u-button>
		</view>

		<view class="buttom">
			<view class="hint">
				<u-checkbox-group v-model="checked" placement="column" @change="checkboxChange">
					<u-checkbox label=" " name="1" shape="circle">
					</u-checkbox>
				</u-checkbox-group>
				我已阅读并同意
				<text class="link" @click="toSave()">《服务协议》</text>
				<text class="link" @click="toPrivacy()">《隐私政策》</text>

			</view>
		</view>
		<view class="wechat" @click="wechatLogin">
			<u-icon name="weixin-circle-fill" :color="themeColor" size="112rpx"></u-icon>
		</view>
		<view class="cg-color999 cg-text-center" @click="$CGRouter.go(1)">
			暂不登录
		</view>
		<view class="forgetPass" @tap="$CGRouter.push('/pages/account/pw-forget')">忘记密码?</view>
		<cg-custom-alert></cg-custom-alert>
	</view>
</template>

<script>
	import wechatLoign from './wechatLogin.js';
	import {
		getCode
	} from '@/api/common.js'
	export default {

		data() {
			return {
				phone: '13311212918', //手机号
				password: '11111111111.', //密码
				check: false, //协议按钮
				loginType: 1,
				checked: ['1'],


			};
		},
		computed: {
			btnText() {
				if (this.loginType === 0) {
					return '获取验证码'
				} else {
					return '立即登录'
				}
			},
			largeLoginText() {
				if (this.loginType === 0) {
					return '手机号登录'
				} else {
					return '密码登录'
				}
			},
			littleLoginText() {
				if (this.loginType === 0) {
					return '密码登录'
				} else {
					return '短信验证码登录'
				}
			}
		},
		onLoad() {
console.log('999:',999);
		},

		methods: {
			wechatLogin() {
				wechatLoign().then(() => {


				}).catch(() => {
					// this.$CGRouter.replace('/pages/account/mobile-bind')
				})

			},
			checkboxChange(n) {
				console.log('change', n);
			},
			changeLoginType() {
				if (this.loginType === 0) {
					this.loginType = 1;
				} else {
					this.loginType = 0;
				}
			},
			async submit() {
				return this.$dialog.confirm('111');
				if (!this.phone) return this.$dialog.toast('请输入手机号')
				const data = {
					username: this.phone,
					loginType: 'pass'
				}
				if (this.loginType === 0) {
					await getCode(this.phone)
					this.$CGRouter.push('/pages/account/code-verify', {
						tell: this.phone
					})
				} else {
					if (!this.password) return this.$dialog.toast('请输入密码')
					data.password = this.password;
					this.$store.dispatch('login', data);

				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.login {
		padding: 65rpx;

		.login-text {
			padding: 100rpx 0 270rpx 0;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;

			.large-text {
				font-size: 50rpx;
				font-weight: bold;
			}

			.little-text {
				font-size: 28rpx;
			}
		}

		.input-box {
			border-bottom: 1px solid #C0C0C0;
			padding: 15rpx;
			font-size: 28rpx;
			margin-top: 40rpx;
			padding-right: 0;

			.area {
				margin-right: 10rpx;
				padding-right: 10rpx;
				border-right: 1px solid #C0C0C0;
			}
		}

		.btn-login {
			margin-top: 90rpx;
		}

		.buttom {
			margin-top: 50rpx;

			.hint {
				display: flex;
				align-items: center;
				font-size: 22rpx;

				.link {
					color: #439EFF;
				}
			}
		}
	}

	.wechat {
		width: 112rpx;
		height: 112rpx;
		// background: #00C690;
		margin: 50rpx auto;
		border-radius: 50%;
	}

	//忘记密码
	.forgetPass {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: calc(#{$safeBottom} + 72rpx);
		font-size: 28rpx;
		text-align: center;

		color: #E7173B;
	}
</style>